<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="90px" label-position="left">
          <el-col :span="8">
            <el-form-item
              label="客户名称"
            >
              <el-select
                :disabled="$store.state.user.fsiteLevel == 3"
                v-model="listQuery.fsiteNo"
                clearable
                filterable
                class="filter-item"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="存放地点">
              <el-select
                clearable
                filterable
                v-model="listQuery.fpointNo"
                class="filter-item"
                placeholder="请选择存放地点"
              >
                <el-option
                  v-for="item in getListfpointNoArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item label="所属仓库" prop="fstockno">
              <el-select
                clearable
                filterable
                v-model="listQuery.fstockno"
                class="filter-item"
                placeholder="请选择所属仓库"
              >
                <el-option
                  v-for="item in wmslistArea"
                  :key="item.fstockno"
                  :label="item.fstockname"
                  :value="item.fstockno"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="序列号">
              <el-input
                v-model="listQuery.fequipmentbarcode"
                clearable
                placeholder="请输入序列号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="固定资产码">
              <el-input
                v-model="listQuery.fmacno"
                clearable
                class="filter-item"
                placeholder="请输入固定资产码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="存储分类">
              <el-select
                clearable
                filterable
                v-model="listQuery.fstorageflag"
                class="filter-item"
                placeholder="请选择存储分类"
              >
                <el-option
                  v-for="item in getListfstorageflag"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态">
              <el-select
                clearable
                filterable
                v-model="listQuery.fstate"
                class="filter-item"
                placeholder="请选择设备状态"
              >
                <el-option
                  v-for="item in getListfstate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button @click="handleFilter" type="primary">查找</el-button>
              <el-button @click="handleCreate" type="success">添加</el-button>
              <el-button @click="handleUpload" type="info">导入</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <JNPF-table v-loading="listLoading" :data="list">
          <el-table-column
            align="center"
            label="操作"
            class-name="small-padding"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="handleUpdate(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :index="indexMethod"
            align="center"
            label="序"
            type="index"
          />
          <el-table-column
            :formatter="formatfpointNo"
            align="left"
            label="存放地点"
            prop="fpointNo"
          />
          <el-table-column
            :formatter="formatfstockno"
            align="left"
            label="所属仓库"
            prop="fstockno"
          />
          <el-table-column
            align="left"
            label="序列号"
            prop="fequipmentbarcode"
          />
          <el-table-column
            align="left"
            label="固定资产码"
            prop="fmacno"
          />
          <el-table-column
            align="left"
            label="储物柜名称"
            prop="fequipmenttag"
          />

          <el-table-column
            :formatter="formatfstorageflag"
            align="left"
            label="存储分类"
            prop="fstorageflag"
          />
          <el-table-column
            :formatter="flabeltype"
            align="left"
            label="标签类型"
            prop="flabeltype"
          />
          <el-table-column
            align="left"
            label="设备状态"
            prop="fstate"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.fstate === 1"
                >{{ scope.row.fstate | statusFilter }}</span
              >
              <span
                v-else-if="scope.row.fstate === 2"
                >{{ scope.row.fstate | statusFilter }}</span
              >
              <span  v-else>{{
                scope.row.fstate | statusFilter
              }}</span>
            </template>
          </el-table-column>
        </JNPF-table>
        <paginations
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
        />
      </div>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :fullscreen="true"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :title="textMap[dialogStatus]"
    >
      <el-tabs type="border-card">
        <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form
              ref="dataForm"
              :rules="rules"
              :model="dataForm"
              status-icon
              label-position="left"
              label-width="100px"
            >
            <el-col :span="6">
              <el-form-item
              
              v-if="this.$store.state.user.fsiteLevel == 3"
              label="客户名称"
              prop="fsiteNo"
            >
              <el-select
                disabled
                v-model="dataForm.fsiteNo"
                clearable
                filterable
                class="filter-item"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              </el-form-item>
              <el-form-item label="客户名称" prop="fsiteNo" v-else>
                <el-select
                  v-if="dialogStatus == 'create'"
                  @change="changeFsiteNoAdd"
                  v-model="dataForm.fsiteNo"
                  clearable
                  filterable
                  class="filter-item"
                  placeholder="请选择客户名称"
                >
                  <el-option
                    v-for="item in getListfsiteNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item  label="设备序列号" prop="fequipmentbarcode">
              <el-input
                v-if="dialogStatus == 'create'"
                v-model="dataForm.fequipmentbarcode"
              />
              <el-input v-else disabled v-model="dataForm.fequipmentbarcode" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="固定资产码" prop="fmacno">
              <el-input v-model="dataForm.fmacno" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="设备状态" prop="fstate" width="150">
              <el-select
                clearable
                filterable
                v-model="dataForm.fstate"
                class="filter-item"
                placeholder="请选择设备状态"
              >
                <el-option
                  v-for="item in getListfstate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="所属仓库" prop="fstockno">
              <el-select
                clearable
                filterable
                v-model="dataForm.fstockno"
                class="filter-item"
                placeholder="请选择所属仓库"
              >
                <el-option
                  v-for="item in wmslist"
                  :key="item.fstockno"
                  :label="item.fstockname"
                  :value="item.fstockno"
                />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="设备名称" prop="fequipmenttag">
              <div
                v-if="dialogStatus == 'create'"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-input
                  v-model="dataForm.fequipmenttag"
                />
                <i
                  class="el-icon-search selectI"
                  @click="searchDialogEequipmentInfo()"
                />
              </div>
              <div
                v-else
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-input
                  disabled
                  v-model="dataForm.fequipmenttag"
                />
              </div>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="存放地点" prop="fpointNo">
              <div style="display: flex;justify-content: flex-start;align-items: center;">
                <el-select
                  clearable
                  filterable
                  @change="fpointNoChange"
                  v-model="dataForm.fpointNo"
                  class="filter-item"
                  placeholder="请选择存放地点"
                >
                  <el-option
                    v-for="item in getListfpointNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <i
                  class="el-icon-search selectI"
                  @click="searchDialoglab('add')"
                />
              </div>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="存放位置" prop="fpointSize">
              <el-input v-model="dataForm.fpointSize" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="存储分类" prop="fstorageflag">
              <el-select
                v-if="dialogStatus == 'create'"
                clearable
                filterable
                v-model="dataForm.fstorageflag"
                class="filter-item"
                placeholder="请选择存储分类"
              >
                <el-option
                  v-for="item in getListfstorageflag"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-else
                disabled
                clearable
                filterable
                v-model="dataForm.fstorageflag"
                class="filter-item"
                placeholder="请选择存储分类"
              >
                <el-option
                  v-for="item in getListfstorageflag"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="指示灯开" prop="flamp3">
                <el-input v-model="dataForm.flamp3" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="控制器-IP" prop="fip">
              <el-input v-model="dataForm.fip" placeholder="请输入控制器-IP" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="控制器-PORT" prop="fport">
              <el-input
                v-model="dataForm.fport"
                placeholder="请输入控制器-PORT"
              />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="标签类型" prop="flabeltype">
              <el-select
                clearable
                filterable
                v-model="dataForm.flabeltype"
                class="filter-item"
                placeholder="请选择标签类型"
              >
                <el-option
                  v-for="item in codetypelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="蜂鸣器灯开" prop="flamp1">
              <el-input v-model="dataForm.flamp1" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="蜂鸣器灯关" prop="flamp2">
              <el-input v-model="dataForm.flamp2" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="text" style="width:97%" label="视频URL" prop="fvideourl">
              <el-input v-model="dataForm.fvideourl" />
            </el-form-item>
            </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="明细表">
          <JNPF-table v-loading="listLoading"  :data="dataForm.details" :height="screenHeight-230">
                <el-table-column  align="center" label="序" prop="fseq" width="50"/>
                <el-table-column
                  align="left"
                  label="序列号"
                  width="260"
                  prop="fboxbarcode"
                >
                <template slot-scope="scope">
                  <el-input 
                    v-model="scope.row.fboxbarcode" 
                    v-direction="{ x: 0, y: scope.$index,type:3}"
                  >
                     <el-button slot="append" icon="el-icon-search" @click="searchDialogwarehouse"></el-button>
                  </el-input>
                </template>
                </el-table-column>
                <el-table-column
                  :formatter="formatfmacno"
                  align="left"
                  label="固定资产码"
                  width="200"
                  prop="fmacno"
                />
                <el-table-column
                  class='required'
                  :formatter="formatfequipmenttag"
                  align="left"
                  label="储物仓名称"
                  prop="fequipmenttag"
                />
                <el-table-column
                  align="center"
                  width="150"
                  label="操作"
                  class-name="small-padding"
                >
                  <template slot-scope="scope">
                    <el-button type='text' @click="handleDelete1(scope.row)"> 删除</el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()" type="info">取消</el-button>
        <el-button v-if="dialogStatus == 'create'" @click="createData"
         type="primary"
          >确定</el-button
        >
        <el-button v-else @click="updateData" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <equipmentInfoDialog
      :equipmentInfoVisible.sync="equipmentInfoVisible"
      @equipmentInfoDialog="equipmentInfoDialogValue"
    />
    <warehouseDialog
      v-if="warehouseVisible"
      :warehouseVisible.sync="warehouseVisible"
      :fsiteNo.sync="wareDialogFsiteNo"
      :fpointNo.sync="labDialogFpointNo"
      :checkUnBind.sync="checkUnBind"
      :fstorageflag.sync="fstorageflagName"
      @warehouseDialog="warehouseDialogValue"
    />
    <labDialog
      :searchVisiblelab.sync="searchVisiblelab"
      :fsiteNo.sync="labDialogFsiteNo"
      @labDialog="labDialogValue"
    />
  </div>
</template>

<script>
import {
  listtsCabinet,
  createtsCabinet,
  updatetsCabinet,
  deletetsCabinet,
} from "@/api/tsCabinet";
import {
  getListArea,
  getFequipmentbarcode,
  fsiteOptionsByLevel,
  uploadPath2,
  getPointOptions,
} from "@/api/area";
import { getToken } from "@/utils/auth";
import { listtsStock } from "@/api/tsStock";
import Pagination from "@/components/Pagination";
import EquipmentInfoDialog from "@/components/EquipmentInfoDialog";
import WarehouseDialog from "@/components/WarehouseDialog";
import { listtsWarehouse, uploadPath } from "@/api/tsWarehouse";
import LabDialog from "@/components/LabDialog";
import moment from "moment";
import { getApiUrl } from "@/utils/request";
const statusMap = {
  1: "已启用",
  2: "闲置中",
  8: "已报废",
};
export default {
 name: "ITsCabinet",
  components: { Pagination, EquipmentInfoDialog, WarehouseDialog, LabDialog },
  filters: {
    statusFilter(type) {
      return statusMap[type]
    }
  },
  data() {
    return {
       screenHeight: document.body.clientHeight,
      checkUnBind: 1,
      fstorageflagName: "",
      isAdd1: true,
      panelHeight: 0,
      labFlag: null,
      getListfpointNoAll: [],
      searchVisiblelab: false,
      labDialogFsiteNo: null,
      getListfpointNo: [],
      getListfpointNoArea: [],
      wmslistArea: [],
      downUrl: null,
      uploadVisible: false,
      uploadPath2,
      wareDialogFsiteNo: null,
      labDialogFpointNo: null,
      getListfsiteNo: [],
      selectList: [],
      wmslist: [],
      wmslistAll: [],
      listWarehouse: [],
      uploadPath,
      warehouseVisible: false,
      equipmentInfoVisible: false,
      dataForm1: {
        fseq: undefined,
        fboxbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        frfidid: undefined,
        fmacno: undefined,
      },
      playsTmp: null,
      actionsTmp: [],

      getListfstorageflag: [],
      list: null,
      total: 0,
      showAll:false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        feuipmentid: undefined,
        fsiteNo: undefined,
        fequipmentbarcode: undefined,
        fequipmenttag: undefined,
        fstorageflag: undefined,
        fimage: undefined,
        fip: undefined,
        fport: undefined,
        fvideourl: undefined,
        fstate: undefined,
        fstockno: undefined,
        fupddate: undefined,
        flabeltype: undefined,
        foperator: undefined,
        fstate1: undefined,
        fstate2: undefined,
        fstate3: undefined,
        fstate4: undefined,
        flamp1: undefined,
        flamp2: undefined,
        flamp3: undefined,
        fpointNo: undefined,
        fmacno: undefined,
        sort: "create_time",
        order: "desc",
      },
      dataForm: {
        fsiteNo: undefined,
        feuipmentid: undefined,
        fequipmentbarcode: undefined,
        fequipmenttag: undefined,
        fstorageflag: undefined,
        fimage: undefined,
        fip: undefined,
        fport: undefined,
        fvideourl: undefined,
        fstate: undefined,
        fupddate: undefined,
        fstockno: undefined,
        foperator: undefined,
        id: undefined,
        fspec: undefined,
        flabeltype: undefined,
        fequipmenttype: undefined,
        fstate1: undefined,
        fstate2: undefined,
        fstate3: undefined,
        fstate4: undefined,
        flamp1: undefined,
        flamp2: undefined,
        flamp3: undefined,
        fmacno: undefined,
        fpointNo: undefined,
        fpointSize: undefined,
        details: [{
          fboxbarcode:"",
          fmacno:"",
          fequipmenttag:""
        }],
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      codetypelist: [
        { label: "RFID", value: 0 },
        { label: "二维码", value: 1 },
      ],
      rules: {
        fsiteNo: [{ required: true, message: "客户名称不能为空" }],
        feuipmentid: [
          { required: true, message: "储物柜编号不能为空" },
          {
            type: "number",
            message: "储物柜编号必须为数字值",
            trigger: "blur",
          },
        ],
        fequipmentbarcode: [{ required: true, message: "序列号不能为空" }],
        fstockno: [
          { required: true, message: "所属仓库不能为空", trigger: "blur" },
        ],
        fequipmenttag: [{ required: true, message: "设备名称不能为空" }],
        flabeltype: [{ required: true, message: "标签类型不能为空" }],
        fstorageflag: [{ required: true, message: "存储分类不能为空" }],
        fstate: [
          { type: "number", message: "设备状态必须为数字值", trigger: "blur" },
        ],
      },
      rules1: {
        feuipmentid: [
          { required: true, message: "储物仓编号不能为空" },
          {
            type: "number",
            message: "储物仓编号必须为数字值",
            trigger: "blur",
          },
        ],
        fseq: [{ required: true, message: "行号不能为空" }],
        fboxbarcode: [{ required: true, message: "序列号不能为空" }],
        fequipmenttag: [{ required: true, message: "储物仓名称不能为空" }],
        fmacno: [{ required: true, message: "固定资产码不能为空" }],
        frfidid: [
          { type: "number", message: "RFID天线必须为数字值", trigger: "blur" },
        ],
        flabeltype: [{ type: "number", message: "标签类型不能为空" }],
      },
      getListfstate: [
        { value: 1, label: "已启用" },
        { value: 2, label: "闲置中" },
        { value: 8, label: "已报废" },
      ],
    };
  },
  created() {
    this.keyCode();
    this.downUrl = getApiUrl() + "xlsx/2-2储物柜资料.xlsx";
    this.panelHeight = document.documentElement.clientHeight - 378;
    getListArea({ flag: 28 })
      .then((response) => {
        this.getListfstorageflag = response.data.data.list;
      })
      .catch(() => {
        this.getListfstorageflag = [];
      });

    listtsWarehouse({ limit: -1 })
      .then((response) => {
        this.listWarehouse = response.data.data.list;
      })
      .catch(() => {
        this.listWarehouse = [];
      });
    this.formwmslist();
    fsiteOptionsByLevel(3)
      .then((response) => {
        this.getListfsiteNo = response.data.data.list;
      })
      .catch(() => {
        this.getListfsiteNo = [];
      });
    if (this.$store.state.user.fsiteLevel == 3) {
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
      listtsStock({ fsiteNo: this.$store.state.user.fsiteNo, limit: -1 })
        .then((response) => {
          this.wmslist = response.data.data.list;
          this.wmslistArea = response.data.data.list;
        })
        .catch(() => {
          this.wmslist = response.data.list;
          this.wmslistArea = response.data.list;
        });

      // 存放地点
      getListArea({ flag: 10, arg1: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.getListfpointNo = response.data.data.list;
          this.getListfpointNoArea = response.data.data.list;
        })
        .catch(() => {
          this.getListfpointNo = [];
          this.getListfpointNoArea = [];
        });
      // 存放地点
      getPointOptions(this.$store.state.user.fsiteNo)
        .then((response) => {
          this.getListfpointNoAll = response.data.data.list;
        })
        .catch(() => {
          this.getListfpointNoAll = [];
        });
    } else {
      // 存放地点
      getPointOptions()
        .then((response) => {
          this.getListfpointNoAll = response.data.data.list;
        })
        .catch(() => {
          this.getListfpointNoAll = [];
        });
    }
    this.getList();
  },
  computed: {
    headers() {
      return {
        Authorization: getToken(),
      };
    },
  },
  methods: {
     //回车
    keyCode() {
      let direction = this.$getDirection();
      let _this=this;
      direction.on("keyup", function (e, val) {
        if (e.keyCode === 13) {
          if(val.y==_this.dataForm.details.length-1)
          {
            _this.addrow(res=>{
               direction.next();
            })
          }
          else
          {
           direction.next();
          }
        }
        if (e.keyCode === 37) {
          direction.previous();
        }
        if (e.keyCode === 38) {
          direction.previousLine();
        }
        if (e.keyCode === 40) {
          direction.nextLine();
        }
        if (e.keyCode == 39) {
          direction.next();
        }
      });
    },
    //添加行
    addrow(callback){
      this.dataForm.details.push({
        fseq:this.dataForm.details.length+1,
         fboxbarcode:"",
          fmacno:"",
          fequipmenttag:""
      })
      setTimeout(()=>{
      callback(200)
      },300)
    },
    uploadFileSuccess: function (response) {
      this.uploadVisible = false;
      this.$notify.success({
        title: "导入",
        dangerouslyUseHTMLString: true,
        message: response.data,
      });
    },
    handleUpload() {
      this.uploadVisible = true;
    },
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    formdata2: function (fequipmentbarcode) {
      return { ftype: "8", fequipmentbarcode: fequipmentbarcode };
    },
    handleAvatarSuccess(res, file) {
      this.dataForm.fimage = res.data;
      const time = new Date().getTime();
      this.dataForm.fimage = `${this.dataForm.fimage}?time=${time}`;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 地点改变
    fpointNoChange(data) {
      this.dataForm.details = [];
      this.selectList = [];
    },

    changeFsiteNo(data) {
      this.listQuery.fpointNo = "";
      this.listQuery.fstockno = "";
      this.getListfpointNoArea = [];
      this.wmslistArea = [];

      if (data) {
        listtsStock({ fsiteNo: data, limit: -1 })
          .then((response) => {
            this.wmslistArea = response.data.data.list;
          })
          .catch(() => {
            this.wmslistArea = response.data.list;
          });

        // 存放地点
        getListArea({ flag: 10, arg1: data })
          .then((response) => {
            this.getListfpointNoArea = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNoArea = [];
          });
      }
    },

    // 客户名称改变
    changeFsiteNoAdd(data) {
      this.clear();
      this.wmslist = [];
      this.dataForm.fpointNo = "";
      this.getListfpointNo = [];
      this.dataForm.details = [];
      this.selectList = [];
      if (data) {
        listtsStock({ fsiteNo: data, limit: -1 })
          .then((response) => {
            this.wmslist = response.data.data.list;
          })
          .catch(() => {
            this.wmslist = response.data.list;
          });
        // 存放地点
        getListArea({ flag: 10, arg1: data })
          .then((response) => {
            this.getListfpointNo = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNo = [];
          });
      }
    },
    clear() {
      this.$set(this.dataForm, "fstockno", "");
    },

    // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value;
      if (value === "add") {
        this.labDialogFsiteNo = this.dataForm.fsiteNo;
      } else {
        this.labDialogFsiteNo = this.listQuery.fsiteNo;
      }
      this.searchVisiblelab = true;
    },

    // 地点弹出框返回值
    labDialogValue(value) {
      if (this.labFlag === "add") {
        this.dataForm.fpointNo = value.lab.fpointNo;
        this.dataForm.details = [];
        this.selectList = [];
      } else {
        this.listQuery.fpointNo = value.lab.fpointNo;
      }
    },

    // 存放地点
    formatfpointNo: function (row, column) {
      if (this.getListfpointNoAll) {
        for (let i = 0; i < this.getListfpointNoAll.length; i++) {
          if (row.fpointNo === this.getListfpointNoAll[i].value) {
            return this.getListfpointNoAll[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 客户名称
    formatfsiteNo: function (row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 储物仓固定资产码
    formatfmacno: function (row, column) {
      if (this.listWarehouse) {
        for (let i = 0; i < this.listWarehouse.length; i++) {
          if (row.fboxbarcode == this.listWarehouse[i].fequipmentbarcode) {
            return this.listWarehouse[i].fmacno;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 储物仓名称
    formatfequipmenttag: function (row, column) {
      if (this.listWarehouse) {
        for (let i = 0; i < this.listWarehouse.length; i++) {
          if (row.fboxbarcode == this.listWarehouse[i].fequipmentbarcode) {
            return this.listWarehouse[i].fequipmenttag;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 储物仓编号
    formatfeuipmentid: function (row, column) {
      if (this.listWarehouse) {
        for (let i = 0; i < this.listWarehouse.length; i++) {
          if (row.fboxbarcode == this.listWarehouse[i].fequipmentbarcode) {
            return this.listWarehouse[i].feuipmentid;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // RFID天线
    formatfrfidid: function (row, column) {
      if (this.listWarehouse) {
        for (let i = 0; i < this.listWarehouse.length; i++) {
          if (row.fboxbarcode == this.listWarehouse[i].fequipmentbarcode) {
            return this.listWarehouse[i].frfidid;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 存储分类
    formatfstorageflag: function (row, column) {
      if (this.getListfstorageflag) {
        for (let i = 0; i < this.getListfstorageflag.length; i++) {
          if (row.fstorageflag == this.getListfstorageflag[i].value) {
            return this.getListfstorageflag[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 状态
    formatfstate: function (row, column) {
      if (this.getListfstate) {
        for (let i = 0; i < this.getListfstate.length; i++) {
          if (row.fstate == this.getListfstate[i].value) {
            return this.getListfstate[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 设备信息弹出框
    searchDialogEequipmentInfo() {
      this.equipmentInfoVisible = true;
    },

    // 设备信息弹出框
    equipmentInfoDialogValue(value) {
      this.dataForm.feuipmentid = value.info.feuipmentid;
      this.dataForm.fequipmenttag = value.info.fequipmentname;
      this.dataForm.fequipmenttype = value.info.fequipmenttype;
      this.dataForm.fspec = value.info.fspec;
      getFequipmentbarcode({ feuipmentid: value.info.feuipmentid })
        .then((response) => {
          if (response) {
            this.dataForm.fequipmentbarcode = response.data.data;
          }
        })
        .catch(() => {
          this.dataForm.fequipmentbarcode = "";
        });
    },

    // 储物仓弹出框
    searchDialogwarehouse() {
      console.log(1)
      this.warehouseVisible = true;
      this.wareDialogFsiteNo = this.dataForm.fsiteNo;
      this.labDialogFpointNo = this.dataForm.fpointNo;
      this.fstorageflagName = this.dataForm.fstorageflag;
    },

    // 储物仓弹出框
    warehouseDialogValue(value) {
      this.dataForm1.fboxbarcode = value.info.fequipmentbarcode;
      this.dataForm1.feuipmentid = value.info.feuipmentid;
      this.dataForm1.fequipmenttag = value.info.fequipmenttag;
      this.dataForm1.frfidid = value.info.frfidid;
      this.dataForm1.fmacno = value.info.fmacno;
    },
    getList() {
      this.listLoading = true;
      if (this.listQuery.fequipmentbarcode == "") {
        this.listQuery.fequipmentbarcode = null;
      }
      listtsCabinet(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    //仓库名称
    //仓库
    formwmslist: function () {
      listtsStock({ limit: -1 })
        .then((response) => {
          this.wmslistAll = response.data.data.list;
        })
        .catch(() => {
          this.wmslistAll = response.data.list;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetForm() {
      this.dataForm = {
        feuipmentid: undefined,
        fequipmentbarcode: undefined,
        fequipmenttag: undefined,
        fstorageflag: undefined,
        fimage: undefined,
        fip: undefined,
        fport: undefined,
        fvideourl: undefined,
        fstate: undefined,
        fupddate: undefined,
        foperator: undefined,
        id: undefined,
        fpointNo: undefined,
        fpointSize: undefined,
        flamp1: undefined,
        flamp2: undefined,
        flamp3: undefined,
        details: [],
      };
    },
    resetForm1() {
      this.dataForm1 = {
        fseq: undefined,
        fboxbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        frfidid: undefined,
        fmacno: undefined,
      };
    },
    handleCreate() {
      this.resetForm();

      this.dialogStatus = "create";
      if (this.getListfstorageflag.length > 0) {
        this.dataForm.fstorageflag = this.getListfstorageflag[0].value;
      }
      if (this.$store.state.user.fsiteLevel == 3) {
        this.dataForm.fsiteNo = this.$store.state.user.fsiteNo;
      } else {
        this.wmslist = [];
        this.getListfpointNo = [];
      }
      this.dataForm.fstate = 1;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });

      // 子表
      this.handleUpdate1();
      this.resetForm1();
      this.dataForm1.fseq = 1;
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          createtsCabinet(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data);
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "成功",
                message: "添加储物柜资料成功",
              });
              this.selectList = [];
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.data,
              });
            });
        }
      });
    },
    handleUpdate(row) {
      this.dataForm = JSON.parse(JSON.stringify(row)) ;
      this.dataForm.details.push({
        fseq:this.dataForm.details.length+1,
         fboxbarcode:"",
          fmacno:"",
          fequipmenttag:""
      })
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.actionsTmp = row;
      this.playsTmp = [];
      if (this.$store.state.user.fsiteLevel != 3) {
        listtsStock({ fsiteNo: row.fsiteNo, limit: -1 })
          .then((response) => {
            this.wmslist = response.data.data.list;
          })
          .catch(() => {
            this.wmslist = response.data.list;
          });

        // 存放地点
        getListArea({ flag: 10, arg1: row.fsiteNo })
          .then((response) => {
            this.getListfpointNo = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNo = [];
          });
      }
      if (row.details) {
        row.details.forEach((v) => {
          this.playsTmp.push(v);
          this.selectList.push(v.fboxbarcode);
        });
      }
      // 子表
      this.handleUpdate1();
      this.resetForm1();
      if (this.dataForm.details.length > 0) {
        // 计算行号
        let len = this.dataForm.details.length - 1;
        this.dataForm1.fseq = this.dataForm.details[len].fseq + 1;
      } else {
        this.dataForm1.fseq = 1;
      }
    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          (this.dataForm.foperator = this.$store.state.user.id.toString()),
            (this.dataForm.fupddate = new Date()),
            updatetsCabinet(this.dataForm, this.$route.query.id)
              .then(() => {
                for (const v of this.list) {
                  if (v.fequipmentbarcode === this.dataForm.fequipmentbarcode) {
                    const index = this.list.indexOf(v);
                    this.list.splice(index, 1, this.dataForm);
                    break;
                  }
                }
                this.dialogFormVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "更新储物柜资料成功",
                });
                this.selectList = [];
              })
              .catch((response) => {
                this.$notify.error({
                  title: "失败",
                  message: response.data.data,
                });
              });
        }
      });
    },
    handleDelete(row) {
      this.$confirm("是否要删除储物柜资料", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletetsCabinet(row)
            .then((response) => {
              this.$notify.success({
                title: "成功",
                message: "删除储物柜资料成功",
              });
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.data,
              });
            });
        })
        .catch(() => {});
    },

    handleUpdate1() {
      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });
    },

    // 子表一添加编辑
    handleEdit1(row) {
      this.dataForm1 = Object.assign({}, row);
      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });

      this.dataForm1.fequipmenttag = this.formatfequipmenttag(row);
      this.dataForm1.fmacno = this.formatfmacno(row);
      this.dataForm1.feuipmentid = this.formatfeuipmentid(row);
    },
    // 子表一编辑保存数据
    editData1() {
      this.$refs["dataForm1"].validate((valid) => {
        if (valid) {
          if (this.dataForm.details.length > 0) {
            let temp = [...this.dataForm.details];
            let isRepeat = false;
            for (const v of this.dataForm.details) {
              if (v.fseq === this.dataForm1.fseq) {
                const index = this.dataForm.details.indexOf(v);
                // 判断序列号是否重复
                temp.splice(index, 1);
                for (const vi of temp) {
                  if (vi.fboxbarcode == this.dataForm1.fboxbarcode) {
                    isRepeat = true;
                    this.$notify.error({
                      title: "失败",
                      message: "所选序列号重复",
                    });
                    return;
                  }
                }

                if (!isRepeat) {
                  this.dataForm.details.splice(index, 1, this.dataForm1);
                  this.selectList.splice(index, 1, this.dataForm1.fboxbarcode);
                  this.isAdd1 = false;
                  break;
                }
              }
            }
            if (this.isAdd1) {
              // 判断序列号是否重复
              const tem = this.selectList.indexOf(this.dataForm1.fboxbarcode);
              if (tem < 0) {
                if (valid) {
                  this.dataForm.details.push(this.dataForm1);
                  this.selectList.push(this.dataForm1.fboxbarcode);
                }
              } else {
                this.$notify.error({
                  title: "失败",
                  message: "所选序列号重复",
                });
                return;
              }
            }
          } else {
            // 判断序列号是否重复
            const tem = this.selectList.indexOf(this.dataForm1.fboxbarcode);
            if (tem < 0) {
              if (valid) {
                this.dataForm.details.push(this.dataForm1);
                this.selectList.push(this.dataForm1.fboxbarcode);
              }
            } else {
              this.$notify.error({
                title: "失败",
                message: "所选序列号重复",
              });
              return;
            }
          }
          this.resetForm1();
          this.isAdd1 = true;
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });
          // 计算行号
          if (this.dataForm.details.length > 0) {
            // 计算行号
            let len = this.dataForm.details.length - 1;
            this.dataForm1.fseq = this.dataForm.details[len].fseq + 1;
          } else {
            this.dataForm1.fseq = 1;
          }
        }
      });
    },

    cancle1() {
      this.resetForm1();
      this.isAdd1 = true;

      // 清除验证
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });

      // 计算行号
      if (this.dataForm.details.length > 0) {
        // 计算行号
        let len = this.dataForm.details.length - 1;
        this.dataForm1.fseq = this.dataForm.details[len].fseq + 1;
      } else {
        this.dataForm1.fseq = 1;
      }
    },

    handleDelete1(row) {
      const index = this.dataForm.details.indexOf(row);
      this.dataForm.details.splice(index, 1);
      this.selectList.splice(index, 1);
      this.resetForm1();
      if (this.dataForm.details.length > 0) {
        // 计算行号
        let len = this.dataForm.details.length - 1;
        this.dataForm1.fseq = this.dataForm.details[len].fseq + 1;
      } else {
        this.dataForm1.fseq = 1;
      }
    },
    cancel() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.list.forEach((v) => {
        if (v.fequipmentbarcode === this.dataForm.fequipmentbarcode) {
          this.dataForm = this.actionsTmp;
          this.dataForm.details = this.playsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          return;
        }
      });
    },
    // 弹窗点击关闭前的回调
    handleClose() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.list.forEach((v) => {
        if (v.fequipmentbarcode === this.dataForm.fequipmentbarcode) {
          this.dataForm = this.actionsTmp;
          this.dataForm.details = this.playsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          return;
        }
      });
    },
    flabeltype(row) {
      switch (row.flabeltype) {
        case 0:
          return "RFID";
          break;
        case 1:
          return "二维码";
          break;
      }
    },
    formatfstockno(row) {
      for (var i = 0; i < this.wmslistAll.length; i++) {
        if (this.wmslistAll[i].fstockno == row.fstockno) {
          return this.wmslistAll[i].fstockname;
        }
      }
    },

    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>